<template>
  <!-- 继承区域表单弹窗 -->
  <a-modal :title="headerTitle" :visible.sync="dialogVisible" @cancel="handleCancel" width="80%">
    <!-- 表单 -->
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="forms" :rules="rules" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
        <div id="dialogDistrictBox">
          <a-row>
            <!-- 继承区域 -->
            <a-col :lg="12" :md="12" :sm="12">
              <a-form-model-item prop="sonIds" label=" " :colon="false">
                <SelectTreeDistrict
                  :treeCheckable="true"
                  :treeCheckStrictly="true"
                  :isDisabled="true"
                  :isInherit="true"
                  :disableInherit="true"
                  :projectId="projectId"
                  :enabledList="forms.fatherId ? [forms.fatherId] : []"
                  v-model="forms.sonIds"
                />
              </a-form-model-item>
            </a-col>
            <!-- 被继承区域 -->
            <a-col :lg="12" :md="12" :sm="12">
              <a-form-model-item prop="fatherId" label="继承" :colon="false" labelAlign="left">
                <SelectTreeDistrict
                  :projectId="projectId"
                  :isInherit="true"
                  :enabledList="forms.sonIds || []"
                  v-model="forms.fatherId"
                  @change="
                    (e) => {
                      $refs.table.selectedRowKeys = []
                      $refs.table.selectedRowsMap = new Map()
                      e && $refs.table.getData(null, true)
                    }
                  "
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <!-- 是否继承区域施工图 -->
            <a-col :lg="12" :md="12" :sm="12">
              <a-form-model-item prop="isInheritChart" label="继承区域施工图">
                <a-radio-group
                  :options="[
                    { label: '是', value: true },
                    { label: '否', value: false }
                  ]"
                  v-model="forms.isInheritChart"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :lg="24" :md="24" :sm="24">
              <a-form-model-item
                prop="respAreaDetailsIds"
                label="选择需继承责任区域"
                :labelCol="{ span: 4 }"
                :wrapperCol="{ span: 19 }"
              >
                <BTable
                  ref="table"
                  :columns="columns"
                  :request="loadData"
                  :scroll="{ y: 300 }"
                  @select-click="
                    $nextTick(() => {
                      $refs.ruleForm.validateField('respAreaDetailsIds')
                    })
                  "
                  :outSelectedRowKeys.sync="forms.respAreaDetailsIds"
                  :selectConfig="{ use: true, type: 'checkbox', rowKey: 'id' }"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
      </a-form-model>
    </a-spin>
    <!-- 页脚操作栏 -->
    <div slot="footer" class="btn_box">
      <a-button :loading="loading" v-if="editModel != 2" type="primary" class="button_right" @click="handleOk"
        >提交</a-button
      >
      <a-button type="primary" @click="handleCancel">关闭</a-button>
    </div>
  </a-modal>
</template>

<script>
import SelectTreeDistrict from '@/components/Select/SelectTreeDistrict'
import { set } from '@/api/quality/currency' // api

export default {
  name: 'dialogInherit',
  components: {
    SelectTreeDistrict
  },
  props: {
    // 操作类型
    editModel: {
      type: [String, Number],
      default() {
        return 0
      }
    },
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 表单
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    // 标题
    headerTitle: {
      type: String,
      default() {
        return '区域继承'
      }
    }
  },
  computed: {
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      }
    }
  },
  data() {
    return {
      forms: {
        // isInheritChart: true
      }, // 表单
      loading: false,
      projectId: this.$route.query.id,
      loadData: (params) => {
        // 若继承区域存在则请求
        if (this.forms.fatherId) {
          return set.list(Object.assign({}, { subItemId: this.forms.fatherId }, params)).then((res) => {
            let datas = this.$clone(res)
            datas.data = res.data.listDutyArea?.length
              ? res.data.listDutyArea.map((item) => {
                  // 格式化整改人
                  item.rectificationPeople = item.rectificationPeople?.length ? item.rectificationPeople.join('，') : ''
                  // 格式化责任人
                  item.dutyPeople = item.dutyPeople?.length ? item.dutyPeople.join('，') : ''
                  return item
                })
              : [] // 列表对象
            return datas
          })
        } else {
          return Promise.resolve({})
        }
      }, // 列表请求
      columns: [
        {
          title: '整改人',
          dataIndex: 'rectificationPeople',
          width: 230,
          ellipsis: true,
          scopedSlots: { customRender: 'rectificationPeople' }
        },
        {
          title: '责任分包商',
          dataIndex: 'dutySubcontractor',
          ellipsis: true
        },
        {
          title: '责任人',
          dataIndex: 'dutyPeople',
          ellipsis: true
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 100,
          customRender(record) {
            return record == 0 ? '停用' : '启用'
          }
        },
        {
          title: '责任区域描述',
          ellipsis: true,
          dataIndex: 'dutyAreaDescription'
        },
        {
          title: '施工内容',
          ellipsis: true,
          dataIndex: 'partNames'
        }
      ], // 表头
      rules: {
        sonIds: [{ required: true, message: '请选择继承区域', trigger: 'change' }],
        fatherId: [{ required: true, message: '请选择被继承区域', trigger: 'change' }]
        // isInheritChart: [{ required: true, message: '请选择是否继承区域施工图', trigger: 'change' }],
        // respAreaDetailsIds: [{ required: true, type: 'array', message: '请选择需要继承的责任区域', trigger: 'change' }]
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$emit('confirm', this.forms)
        }else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    },
    handleCancel() {
      this.dialogVisible = false
    }
  },
  watch: {
    visible(e) {
      if (!e) {
        // 初始化表单和表格
        this.forms = {
          // isInheritChart: true
        }
        this.$refs.table.tableData.length = 0
        this.$refs.table.selectedRowKeys = []
        this.$refs.table.selectedRowsMap = new Map()
        this.$nextTick(this.$refs.ruleForm.clearValidate)
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item .ant-form-item-label {
  width: 160px;
}
/deep/ .ant-form-item .ant-form-item-control-wrapper {
  width: calc(100% - 160px);
}
</style>
